<template>
  <div class="home">
    <Row type="flex" justify="space-around" class="code-row-bg">
        <Col span="4">
          <Card>
            <div style="text-align:center" class="card-box">
              <span class="placeholder"></span>
              <img src="../../assets/img/home1.png">
              <span class="card-name">
                <Anchor :affix="false" v-if="showAnchor">
                  <AnchorLink href="#interaction" title="教学直播交互" />
                </Anchor> 
              </span>
            </div>
          </Card>
        </Col>
        <Col span="4">
          <Card>
            <div style="text-align:center" class="card-box">
              <span class="placeholder"></span>
              <img src="../../assets/img/home2.png">
              <span class="card-name">
                <span class="card-name-item">案例联席研练</span>
              </span>
            </div>
          </Card>
        </Col>
        <Col span="4">
          <Card>
            <div style="text-align:center" class="card-box">
              <span class="placeholder"></span>
              <img src="../../assets/img/home3.png">
              <span class="card-name">
                <span class="card-name-item" @click="goEvaluation">教学评价</span>
              </span>
            </div>
          </Card>
        </Col>
        <Col span="4">
          <Card>
            <div style="text-align:center" class="card-box">
              <span class="placeholder"></span>
              <img src="../../assets/img/home4.png">
              <span class="card-name">
                <Anchor :affix="false" v-if="showAnchor">
                  <AnchorLink href="#dibbling" title="资源点播" />
                </Anchor> 
              </span>
            </div>
          </Card>
        </Col>
        <Col span="4">
          <Card>
            <div style="text-align:center" class="card-box">
              <span class="placeholder"></span>
              <img src="../../assets/img/home5.png">
              <span class="card-name">
                <span class="card-name-item">学生讨论</span>
              </span>
            </div>
          </Card>
        </Col>
    </Row>
    <div id="interaction" class="interaction">
      <div class="header">
        <div class="title">
          教学直播交互
        </div>
        <div class="subtitle">
          <span>课程：XXXX综合演练</span>
          <span>上课时间：2018年07月15日</span>
        </div>
      </div>
      <div class="desc">
        <Row type="flex" justify="space-between" class="code-row-bg">
          <Col span="6">
            <scroll>
              <ul class="wrap">
                <li class="item">
                  <div class="avatar-wrap">
                    <img src="../../assets/img/avatar.png">
                  </div>
                  <ul class="introduction">
                    <li>
                      <span>主讲：</span>
                      <span>张三教员</span>
                    </li>
                    <li>
                      <span>简介：</span>
                      <span>张三，海军大连舰艇学院XX系教员，多年从事XX方面研究，具备丰富的理论研究和教学经验。</span>
                    </li>
                  </ul>
                </li>
                <li class="item">
                  <div class="avatar-wrap">
                    <img src="../../assets/img/avatar.png">
                  </div>
                  <ul class="introduction">
                    <li>
                      <span>助教：</span>
                      <span>王二教员</span>
                    </li>
                    <li>
                      <span>简介：</span>
                      <span>王二，海军大连舰艇学院XX系教员，多年从事XX方面研究，具备丰富的理论研究和教学经验。</span>
                    </li>
                  </ul>
                </li>
                <li class="item">
                  <div class="avatar-wrap">
                    <img src="../../assets/img/avatar.png">
                  </div>
                  <ul class="introduction">
                    <li>
                      <span>助教：</span>
                      <span>李四教员</span>
                    </li>
                    <li>
                      <span>简介：</span>
                      <span>李四，海军大连舰艇学院XX系教员，多年从事XX方面研究，具备丰富的理论研究和教学经验。</span>
                    </li>
                  </ul>
                </li>
                <li class="item">
                  <div class="avatar-wrap">
                    <img src="../../assets/img/avatar.png">
                  </div>
                  <ul class="introduction">
                    <li>
                      <span>助教：</span>
                      <span>李四教员</span>
                    </li>
                    <li>
                      <span>简介：</span>
                      <span>李四，海军大连舰艇学院XX系教员，多年从事XX方面研究，具备丰富的理论研究和教学经验。</span>
                    </li>
                  </ul>
                </li>
              </ul>
            </scroll>
          </Col>
          <Col span="10" class="live-wrap">
            <video src="http://vjs.zencdn.net/v/oceans.mp4"></video>
            <div class="mask">
              <div class="btn-wrap">
                <div class="status">
                  <span class="placeholder"></span>
                  <Icon type="md-podium" />
                  <span>正在上课</span>
                </div>
                <Button type="primary">点击进入</Button>
              </div>
            </div>
          </Col>
          <Col span="6">
            <div id="chart1" class="chart chart1"></div>
            <div id="chart2" class="chart chart2"></div>
          </Col>
        </Row>
      </div>
    </div>
    <div class="vocabulary">
      <Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="11">
          <div class="title">近三分钟高频词汇汇总：</div>
          <div class="word-wrap">
            <scroll>
              <ul class="content">
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">灯光</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">声音</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">太快</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">问题</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">速度</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">问题</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">速度</li>
              </ul>
            </scroll>
          </div>
        </Col>
        <Col span="11">
          <div class="title">总计高频词汇汇总：</div>
          <div class="word-wrap">
            <scroll>
              <ul class="content">
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">灯光</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">声音</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">太快</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">问题</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">速度</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">问题</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">速度</li>
              </ul>
            </scroll>
          </div>
        </Col>
      </Row>
    </div>
    <div id="dibbling" class="dibbling">
      <div class="header">
        资源点播
      </div>
      <div class="content">
        <ul class="wrap clearfix">
        <li class="item" v-for="item in 6">
          <div class="video">
            <video src="http://vjs.zencdn.net/v/oceans.mp4"></video>
            <div class="mask">
              <Icon type="md-arrow-dropright-circle" />
            </div>
          </div>
          <div class="videoinfo">
            <div class="line1 clearfix">
              <div class="name">XX综合模拟演练</div>
              <div class="teacher">讲师：张某某</div>
            </div>
            <div class="line2">上课时间：2018年7月10日</div>
          </div>
        </li>
      </ul>
      </div>
      <div class="footer">
        <span class="placeholder"></span>
        <Button type="text" @click="goResources">更多资源点这里</Button>
        <span>>></span>
      </div>
    </div>
  </div>
</template>
<script>
import Scroll from '@/components/scroll'
export default {
  data() {
    return {
      showAnchor: false
    }
  },
  mounted() {
    this.initChart()
    this.showAnchor = true
  },
  methods: {
    // 初始化图表
    initChart() {
      var myChart1 = this.$echarts.init(document.getElementById('chart1'))
      myChart1.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            itemStyle: {
              normal: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [
              { value: 400, name: '搜索引擎' },
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 274, name: '联盟广告' },
              { value: 235, name: '视频广告' }
            ]
          }
        ]
      })

      var myChart2 = this.$echarts.init(document.getElementById('chart2'))
      myChart2.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            itemStyle: {
              normal: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [
              { value: 400, name: '搜索引擎' },
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 274, name: '联盟广告' },
              { value: 235, name: '视频广告' }
            ]
          }
        ]
      })
    },
    // 高频词汇动态文字颜色
    activeColor() {
      var color = [
        '#2d8cf0',
        '#2db7f5',
        '#19be6b',
        '#ff9900',
        '#ed4014',
        '#17233d'
      ]
      var i = Math.floor(Math.random() * 6)
      return color[i]
    },
    // 高频词汇动态文字大小
    fontSize() {
      return 16 + Math.random() * 10
    },
    // 高频词汇动态文字位置
    top() {
      return Math.random() * 25
    },
    // 跳转更多资源页面
    goResources() {
      this.$router.push({
        name: 'resources'
      })
    },
    // 跳转教学评价页面
    goEvaluation() {
      this.$router.push({
        name: 'evaluation'
      })
    }
  },
  components: {
    Scroll
  },
  watch: {
    $route(newName, oldName) {
      if (newName.name === 'home') {
        this.showAnchor = true
      } else {
        this.showAnchor = false
      }
    }
  }
}
</script>

<style lang="scss">
.home {
  .code-row-bg {
    margin: 50px 0;
    .ivu-card {
      height: 120px;
      .ivu-card-body {
        height: 100%;
      }
      .card-box {
        height: 100%;
        font-size: 0;
        img {
          width: 3.4vw;
          height: 3.4vw;
          vertical-align: middle;
        }
        .card-name {
          vertical-align: middle;
          font-size: 0;
          font-family: 'Arial Normal', 'Arial';
          font-weight: 400;
          font-style: normal;
          color: #333333;
          display: inline-block;
          .card-name-item {
            font-size: 1.6vw;
          }
          & > div {
            display: inline-block;
          }
          .ivu-anchor-ink {
            display: none;
          }
          .ivu-anchor-link {
            padding: 0;
            font-size: 1.6vw;
          }
          .ivu-anchor-wrapper {
            display: inline-block;
          }
        }
      }
    }
  }
  .interaction {
    margin-bottom: 40px;
    .header {
      text-align: center;
      font-family: 'Arial Normal', 'Arial';
      font-style: normal;
      color: #333333;

      .title {
        font-size: 1.6vw;
        font-weight: 400;
      }
      .subtitle {
        font-size: 16px;
        height: 40px;
        line-height: 40px;
      }
    }
    .desc {
      height: 370px;
      .code-row-bg {
        margin: 0;
        height: 100%;
        padding: 0 40px;
        .ivu-col {
          border: 1px solid #e8eaec;
          overflow: hidden;
          .wrap {
            padding: 5px;
            .item {
              display: flex;
              padding: 5px;
              border-bottom: 1px solid #e8eaec;
              .avatar-wrap {
                padding: 0 5px;
                img {
                  width: 60px;
                  height: 60px;
                }
              }
              .introduction {
                padding: 0 5px;
                font-size: 14px;
              }
            }
          }
          .chart {
            width: 100%;
            height: 50%;
          }
          &.live-wrap {
            position: relative;
            video {
              width: 100%;
              height: 100%;
            }
            .mask {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.1);
              .btn-wrap {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                text-align: center;
                .status {
                  text-align: center;
                  color: #fff;
                  font-size: 16px;
                  background: rgba(255, 255, 255, 0.1);
                  padding: 0 20px;
                  margin-bottom: 20px;
                  height: 40px;
                  line-height: 40px;
                  border-radius: 20px;
                  img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                  }
                  span {
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .vocabulary {
    padding: 0 80px;
    height: 90px;
    margin-bottom: 40px;
    box-sizing: border-box;
    .code-row-bg {
      height: 100%;
      margin: 0;
      .ivu-col {
        height: 100%;
        border: 1px solid #e8eaec;
        padding: 0 5px;
        .title {
          font-size: 14px;
          height: 30px;
          line-height: 30px;
        }
        .word-wrap {
          height: calc(100% - 30px);
          overflow-y: hidden;
          .content {
            font-size: 0;
            li {
              text-align: center;
              position: relative;
              display: inline-block;
              width: 20%;
              height: 60px;
            }
          }
        }
      }
    }
  }
  .dibbling {
    .header {
      text-align: center;
      font-size: 1.6vw;
      font-weight: 400;
      margin-bottom: 20px;
    }
    .content {
      padding: 0 80px;
      .wrap {
        width: 100%;
        .item {
          float: left;
          width: calc(100% / 3);
          padding: 0 10px 20px;
          .video {
            width: 100%;
            height: 180px;
            position: relative;
            video {
              width: 100%;
              height: 100%;
            }
            .mask {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.1);
              font-size: 0;
              .ivu-icon {
                font-size: 50px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                transition: font-size 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
                &:hover {
                  font-size: 100px;
                  color: #2d8cf0;
                }
              }
            }
          }
          .videoinfo {
            padding-top: 10px;
            .line1 {
              font-size: 16px;
              .name {
                float: left;
                font-weight: bold;
              }
              .teacher {
                float: right;
              }
            }
          }
        }
      }
    }
    .footer {
      text-align: right;
      padding: 0 80px;
      font-size: 20px;
      font-weight: 400;
      margin-bottom: 20px;
      .ivu-btn {
        font-size: 20px;
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
      }
    }
  }
}
</style>



